<template>
  <div class="container">
    <div class="headerBox">
      <h5 class="f-c" @click="toBasicInfo">基本资料</h5>
      <h5 style="margin-left: 30px" @click="toDetailesInfo">详细资料</h5>
      <h5 class="f-c" style="margin-left: 30px" @click="toAttachment">
        相关附件
      </h5>
    </div>
    <div class="formContainer">
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="detailInfo"
        :rules="rules"
        ref="detailInfo"
      >
        <el-form-item label="体重">
          <el-input
            v-model="detailInfo.tWeight"
            placeholder="请输入体重，单位KG"
          ></el-input>
        </el-form-item>
        <el-form-item label="QQ号码">
          <el-input
            v-model="detailInfo.qq"
            placeholder="请输入QQ号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="tIdCard">
          <el-input
            v-model="detailInfo.tIdCard"
            placeholder="请输入身份证号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-input
            v-model="detailInfo.tPStatus"
            placeholder="请输入政治面貌，比如团员"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在城市">
          <el-input
            v-model="detailInfo.tCity"
            placeholder="请输入省/市/县"
          ></el-input>
        </el-form-item>
        <el-form-item label="教育背景">
          <el-input
            type="textarea"
            v-model="detailInfo.tEducation"
            placeholder="列举中学及大学间的教育经历"
          ></el-input>
        </el-form-item>
        <el-form-item label="掌握技能">
          <el-input
            type="textarea"
            :rows="1"
            v-model="detailInfo.tSkill"
            placeholder="列举你擅长的技能，例如开车、写程序等"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作经历">
          <el-input
            type="textarea"
            :rows="3"
            v-model="detailInfo.tWork"
            placeholder="列举你的工作经历"
          ></el-input>
        </el-form-item>
        <el-form-item label="自我评价">
          <el-input
            type="textarea"
            :rows="3"
            v-model="detailInfo.tBloom"
            placeholder="对自己的综合评价"
          ></el-input>
        </el-form-item>
        <el-form-item label="相关备注">
          <el-input
            type="textarea"
            :rows="3"
            v-model="detailInfo.tRemark"
            placeholder="比如何时能到岗"
          ></el-input>
        </el-form-item>
        <el-form-item style="border-top: 1px dashed #eee">
          <div style="margin-top: 20px">
            <span
              style="font-weight: 600; color: #1270ae; cursor: pointer"
              @click="preInfo"
              >上一步</span
            >
            <el-button
              class="btn-save"
              @click="submitDetails('detailInfo', detailInfo)"
              >保存</el-button
            >
            <span
              style="font-weight: 600; color: #1270ae; cursor: pointer"
              @click="nextInfo"
              >下一步</span
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "DetailInfo",
  data() {
    //检验邮箱
    let validateUserId = (rule, value, callback) => {
      const idReg =
        /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (!value) {
        return callback(new Error("身份证号码不能为空"));
      }
      setTimeout(() => {
        if (idReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的身份证号码"));
        }
      }, 100);
    };
    return {
      loginUserInfo: {},
      detailInfo: {},
      labelPosition: "right",
      rules: {
        tIdCard: [{ validator: validateUserId, trigger: "blur" }],
      },
    };
  },
  computed: {},
  methods: {
    ...mapActions('resume',['updateRequestInfo']),
    ...mapMutations("resume", ["preBack", "next"]),
    //拿到登陆人员最新信息
    async getNewInfo() {
      let nid = this.loginUserInfo.tId;
      await this.$axios
        .get(`/talents/showLoginAndPasswrod/${nid}`)
        .then((res) => {
          this.detailInfo = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //提交表单验证
    submitDetails(detailInfo, obj) {
      this.$refs[detailInfo].validate((valid) => {
        if (valid) {
          this.updateRequestInfo(obj)
        } else {
          return false;
        }
      });
    },
    //上一个路由
    preInfo() {
      this.preBack();
    },
    // 下一个路由
    nextInfo() {
      this.getNewInfo();
      this.next("attachment");
    },
    //to
    toBasicInfo() {
      this.next("info");
    },
    toDetailesInfo() {
      this.next("detail");
    },
    toAttachment() {
      this.next("attachment");
    },
  },
  created() {
    this.loginUserInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
  mounted() {
    this.getNewInfo();
  },
};
</script>

<style scoped>
.container {
  width: 98%;
  height: 900px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.headerBox {
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #cfd1d2;
  cursor: pointer;
}

.formContainer {
  width: 56%;
  margin: 15px 0 0 30px;
}

.f-c {
  color: #999;
}

.btn-save {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #fff;
  margin: 0 20px;
}
</style>